
<style lang="scss" scoped>
.scroll {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  
}

.container {
  position: fixed;
  width: 100%;
  top: 50px;
  bottom: 0;
  background: #fff;
  .cart-box {
    width: 100%;
    height: auto;
    padding-bottom: 40px;
    li {
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      height: auto;
    }
    li > .user {
      width: 100%;
      height: 54px;
      img {
        width: 30px;
        height: 30px;
        display: block;
        margin-right: 8px;
      }
      .user-info i {
        width: 15px;
        height: 15px;
        background: url("/static/ethel_img/star.png") center center no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        margin-left: 5px;
      }
    }
    .time {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: rgba(160, 154, 155, 1);
      font-size: 12px;
    }
    .li-img-ul {
      padding: 10px 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .li-img-ul li {
      width: 30%;
      margin: 0 13px 8px 0;
    }

    .li-img-ul li:nth-child(3n) {
      margin: 0 0 8px 0;
    }

    .li-img-ul img {
      width: 100%;
      height: 100%;
    }
    .li-content {
      font-size: 13px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .score-bottom {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: rgba(102, 99, 99, 1);
      border-bottom: 1px solid #e5e5e5;
    }
  }
  .nav {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    border-bottom: 1px solid #e5e5e5;
    span {
      display: inline-block;
      width: 80px;
      height: auto;
      padding: 5px 0;
      border: 1px solid #e5e5e5;
      margin-right: 10px;
      text-align: center;
      color: #999;
    }
    span.active {
      color: #333;
      border: 1px solid rgba(254, 160, 175, 1);
    }
  }
  .rwap {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
  }
}
</style>

<template>
  <div class="withdrawal">
    <ComHeader title="评价" leftArrow="true"/>

    <div class="container">
      <div class="rwap">评分：{{praise}}的好评</div>
      <div class="nav flex-display flex-center-align">
        <span 
          v-for="(item, index) in navList" 
          :key="index"  
          :class="{'active': comment_type == index}"
          @click="fnSelectType(index)">
          {{item}}
          
        </span>
      </div>
      <scroll
        class="scroll"
        :data="drawalList"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        ref="suggest"
        v-if="drawalList && drawalList.length"
      >
        <ul class="cart-box" v-if="drawalList && drawalList.length">
          <li
            class="item flex-display flex-display-column"
            v-for="(item, index) in drawalList"
            :key="index"
          >
            <div class="user flex-display flex-center-align">
              <img :src="item.user_icon">
              <div class="user-info flex-num-one flex-display flex-center-align">
                <span class="f-14">{{item.user_name}}</span>
                <i v-for="(cle, celIndex) in item.star_level" :key="celIndex"></i>
              </div>
            </div>
            <span class="time">{{item.addtime}}</span>
            <div class="li-content">{{item.content}}</div>
            <ul class="li-img-ul" v-if="item.GoodsComments && item.GoodsComments.length">
              <li v-for="(imgItem, imgIndex) in item.GoodsComments" :key="imgIndex">
                <img :src="imgItem.vectorgraph">
              </li>
            </ul>
            <div class="flex-row-between score-bottom">
              <div>浏览{{item.read}}次</div>
            </div>
          </li>
        </ul>
      </scroll>
    </div>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, MessageBox, Indicator } from "mint-ui";

var expansion = null;
export default {
  data() {
    return {
      navList: ['文本','图片'],
      isHasMore: true, // 是否需要上拉加载
      drawalList: [], // 数据列表
      comment_type: 0, // 分类
      news: 1,
      isNext: "", //  是否有下一页
      praise: 0,
      isPullup: true // 是否需要监听下拉加载
    };
  },
  created() {
    this.ethelWxUserInfo = this.getlocalStorage(this.companyUnique)
      ? this.getlocalStorage(this.companyUnique)
      : "";
    this.goodscomment();
    this.goodscommentinfo();
  },
  computed: {},
  mounted() {
    // 初始化滑动
  },
  methods: {
    fnSelectType(_type) {
      this.comment_type = _type
      this.isNext = '';
      this.drawalList = []
      this.goodscomment()
    },
    goodscommentinfo() {
      api.goodscommentinfo(this.$route.query.goodId,{uid:this.ethelWxUserInfo.id}).catch(result => {
        console.log(result)
        if(result.status === 200 && !result.data.code) {
          this.praise = result.data.data
        }
      })
    },
    goodscomment() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      let params = {
        comment_type: this.comment_type,
        uid: this.ethelWxUserInfo.id
      };
      api
        .getGoodscomment(this.$route.query.goodId, params, this.isNext ? this.isNext.substring(this.isNext.indexOf('index')) : '')
        .catch(result => {
          if (result.status === 200 && result.data.code == 0) {
            this.isNext = result.data.next;
            if (result.data.data.length) {
              result.data.data.forEach(element => {
                element.star_level = parseInt(element.star_level);
              });
            }

            this.drawalList = [...this.drawalList,...result.data.data];
            console.warn(this.drawalList);
          }
          Indicator.close();
        })
        .then(err => {
          Indicator.close();
        });
    },
    /**
     * @desc 是否需要下拉加载
     */
    searchMore() {
      if (this.isNext) {
        this.goodscomment()
      }else {
        Toast({
          message: "我是有底线的",
          duration: 2000
        });
      }
    }
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Toast,
    MessageBox,
    Indicator
  }
};
</script>



